import {
  BaseScene
} from "./baseScene";

export class LoadScene extends BaseScene {
  constructor() {
    super('LoadScene')

    // 进度条 配置
    this._loadingColor = 0xbbbbbb
    this._progressColor = 0x58b9fd
    this._TextColor = '#58b9fd'
  }
  // 绘制进度条
  _createBar() {
    this._loadingBar = this.add.graphics()
    this._loadingBar.fillStyle(this._loadingColor, 1)
    this._loadingBar.fillRoundedRect(
      this.computedX(this.gameCenterX),
      this.gameCenterY,
      this.gameCenterX,
      20,
      10
    )
    this._progressBar = this.add.graphics()

    this._loadingText = this.add.text(
      this.computedX(-this.gameCenterX) + 10,
      this.gameHeight / 2,
      "0%", {
        fontSize: 28,
        color: this._TextColor
      }
    )
  }
  // 切换游戏场景
  _toGameScene() {
    this.scene.stop('LoadScene')
    this.scene.start('GameScene')
  }
  preload() {
    this._createBar()

    // 加载资源
    this.load.image('ball', require('../../assets/blue_ball.png'))
    this.load.image('paddle', require('../../assets/blue_paddle.png'))
    this.load.image('gameover', require('../../assets/gameover.png'))
    this.load.spritesheet('startBtn', require('../../assets/start_button.png'), {
      frameWidth: 401,
      frameHeight: 143
    })

    this.load.image('brickBlue', require('../../assets/blue_brick.png'))
    this.load.image('brickGreen', require('../../assets/green_brick.png'))
    this.load.image('brickPurple', require('../../assets/purple_brick.png'))
    this.load.image('brickRed', require('../../assets/red_brick.png'))
    this.load.image('brickWhite', require('../../assets/white_brick.png'))
    this.load.image('brickYellow', require('../../assets/yellow_brick.png'))


    // 加载进度条
    this.load.on('progress', (rate) => {
      this._progressBar.clear()
      this._progressBar.fillStyle(this._progressColor, 1)
      this._progressBar.fillRoundedRect(
        this.computedX(this.gameCenterX),
        this.gameCenterY,
        this.gameCenterX * rate,
        20,
        10
      )
      this._loadingText.setText(Math.floor(rate * 100) + '%')
    })
    this.load.on('complete', () => {
      this._loadingBar.destroy()
      this._progressBar.destroy()
      this._loadingText.destroy()
    })
  }
  create() {
    let startBtn = this.add.sprite(this.gameCenterX, this.gameCenterY, 'startBtn')

    startBtn.setInteractive() // 作为对象 允许输入事件
    startBtn.setScale(0.5) // 缩小比例
    
    startBtn.on('pointermove', () => {
      startBtn.setFrame(1)
    })
    startBtn.on('pointerout', () => {
      startBtn.setFrame(0)
    })
    // 开始游戏
    startBtn.on('pointerdown', this._toGameScene,this)

    // this._toGameScene()
  }
  update() {

  }
}
